<template>
    <div class="container">
        <div class="flex-box-align" style="padding-bottom: 20px;border-bottom: 1px solid #f4f4f4">
            <div class="flex">出诊情况</div>
            <el-button @click="$router.back(-1)" type="primary" size="medium">返回</el-button>
        </div>
        <div class="flex-box-container" style="margin-top: 20px">
            <div class="block flex">
                <full-calendar lang="zh"
                               :events="[]"
                               @dayClick="dayClick"
                ></full-calendar>
                <!--<div style="visibility: hidden">-->
                    <!--<el-date-picker-->
                            <!--ref="datePicker"-->
                            <!--v-model="visitDate"-->
                            <!--type="date"-->
                            <!--placeholder="选择日期"-->
                            <!--@focus="handleFocus"-->
                            <!--@blur="handleBlur"-->
                            <!--@change="handleChange"-->
                    <!--&gt;-->
                    <!--</el-date-picker>-->
                <!--</div>-->
            </div>
            <div>
                <div v-if="detail && detail != {}">
                    <el-button  class="search-btn" size="small" type="primary" @click="handleClickEdit('edit')">编辑</el-button>
                </div>
                <div v-else>
                    <el-button  class="search-btn" size="small" type="primary" @click="handleClickEdit('add')">新增出诊计划</el-button>
                </div>
            </div>
        </div>
        <div class="inquiry-table" style="" v-if="detail && detail.visitDate">
            <ul>
                <li>
                    <span>日期：</span>
                    <span v-if="detail">{{detail.visitDate}}</span>
                </li>
                <li>
                    <span>出诊状态：</span>
                    <span v-if="detail">
                        <span v-if="detail.visitStatus == 'on'">出诊</span>
                        <span v-else>休息</span>
                    </span>
                </li>
                <li>
                    <span>预约数量：</span>
                    <span v-if="detail">{{detail.planAmount}}</span>
                </li>
                <li>
                    <span>实际预约：</span>
                    <span>{{configList.dataList.length}}</span>
                </li>
            </ul>
            <div class="patient-table">
                <table-list ref="tableList" :tableConfig='configList'>
                    <el-table-column  slot="trueName"  align="center" label="患者姓名">
                        <template slot-scope="scope">
                            <div>{{scope.row.patientUserCoreDTO.trueName}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column  slot="orderDate"  align="center" label="看诊时间">
                        <template slot-scope="scope">
                            <div>{{scope.row.orderDate}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column  slot="area"  align="center" label="出诊地区">
                        <template slot-scope="scope">
                            <div>{{scope.row.doctorUserCoreDTO.province}}{{scope.row.doctorUserCoreDTO.city}}{{scope.row.doctorUserCoreDTO.district}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column  slot="company"  align="center" label="医疗机构">
                        <template slot-scope="scope">
                            <div>{{scope.row.doctorUserCoreDTO.company}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column  slot="address"  align="center" label="联系地址">
                        <template slot-scope="scope">
                            <div>{{scope.row.patientUserCoreDTO.address}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column  slot="mobile"  align="center" label="联系方式">
                        <template slot-scope="scope">
                            <div>{{scope.row.patientUserCoreDTO.mobile}}</div>
                        </template>
                    </el-table-column>
                </table-list>
            </div>
        </div>

        <div class="inquiry-table" v-else>
            <ul>
                <li>
                    <span>日期：</span>
                    <span>{{selectedDay || visitDate}}</span>
                </li>
                <li>
                    <span>出诊状态：</span>
                    <span>
                        无
                    </span>
                </li>
                <li>
                    <span>预约数量：</span>
                    <span>无</span>
                </li>
                <li>
                    <span>实际预约：</span>
                    <span>无</span>
                </li>
                <!--<li>-->
                <!--<span>实际预约：</span>-->
                <!--&lt;!&ndash;<span>11</span>&ndash;&gt;-->
                <!--</li>-->
            </ul>
        </div>

        <el-dialog
            title="新增/编辑出诊计划"
            :visible.sync="dialogVisible"
            width="35%">
            <div class="item-input">
                <span class="title">日期：</span>
                <span v-if="flag == 'add'">
                    <el-date-picker
                            v-model="visitDate1"
                            type="date"
                            placeholder="选择日期"
                            @change="handleSelectDate"
                    >
                    </el-date-picker>
                </span>
                <span v-else>
                    <el-date-picker
                            disabled
                            v-model="detail && detail.visitDate"
                            type="date"
                            placeholder="选择日期"
                    >
                    </el-date-picker>
                </span>
            </div>
            <div class="item-input">
                <span class="title">出诊状态：</span>
                <el-select v-model="visitStatus" placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="item-input">
                <span class="title">预约数量：</span>
                <el-input v-model="planAmount" :maxlength="4" placeholder="请输入"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleClickSure">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    let CONSTANT = require('../../constant/constant.js');
    let common = require("../../common.js");
    import {parseUrlParams} from "../../util";

    export default {
        data() {
            return {
                configList:{
                    url:CONSTANT.URL.PATIENT.APPONITLIST,
                    configList:[
                        {
                            slot: "trueName"
                        },
                        {
                            label:'看诊时间',
                            prop: "orderDate"
                        },
                        {
                            slot: "area"
                        },
                        {
                            slot: "company"
                        },
                        {
                            slot: "address"
                        },
                        {
                            slot:'mobile'
                        },
                    ],
                    param:{
                        doctor: parseUrlParams("id"),
                        queryDate: ""
                    },
                    type:'',
                    width:'',
                    isPagination:true,
                    dataList: []
                },
                detail: {},
                visitDate: "",
                visitDate1: "",
                selectedDay: "",
                dialogVisible: false,
                options: [
                    {label: "出诊", value: "on"},
                    {label: "休息", value: "off"}
                ],
                visitStatus: "",
                planAmount: "",
                flag: "",
            }
        },
        components: {
            'table-list':() => import('../common/my-table'),
            'full-calendar': require('vue-fullcalendar')
        },
        mounted() {
            let today = new Date();
            today.setTime(today.getTime());
            this.visitDate = today.getFullYear()+"-"+(today.getMonth()+1 > 9 ? today.getMonth()+1 : '0'+(today.getMonth()+1))+"-"+(today.getDate() > 9 ? today.getDate() : '0'+(today.getDate()));
            this.configList.param.queryDate = this.visitDate;

            let params = {
                doctorId: parseUrlParams("id"),
                visitDate: this.visitDate
            }
            common.requestAjax(CONSTANT.URL.DOCTOR.VISITDETAIL, JSON.stringify(params), {}, (res) => {
                if (res.status == 200) {
                    this.detail = res.data.bussData
                }
            }, null)

            console.log(this.configList)
        },
        methods: {
            getList(){
                this.$refs.tableList.getList()
            },
            handleClickEdit(str) {
                this.flag = str;
                this.dialogVisible = true
            },
            handleClickSure() {
                let params = {
                    doctorId: parseUrlParams("id"),
                    visitStatus: this.visitStatus,
                    planAmount: this.planAmount,
                    visitDate: this.visitDate1,
                }
                if (!this.visitStatus) {
                    this.$message.error('请选择出诊状态');
                    return false;
                }
                if (!this.planAmount) {
                    this.$message.error('请输入预约数量');
                    return false;
                }
                if (this.flag == 'add') {
                    if (!this.visitDate1) {
                        this.$message.error('请选择出诊日期');
                        return false
                    }
                    common.requestAjax(CONSTANT.URL.DOCTOR.PLANEDIT, JSON.stringify(params), {}, (res) => {
                        if (res.status == 200) {
                            this.$message({
                                type: "success",
                                message: res.msg
                            })
                            this.dialogVisible = false
                        }
                    }, null)
                } else (
                    common.requestAjax(CONSTANT.URL.DOCTOR.PLANEDIT, JSON.stringify(Object.assign(params, {id: this.detail.id, visitDate: this.visitDate})), {}, (res) => {
                        if (res.status == 200) {
                            this.$message({
                                type: "success",
                                message: res.msg
                            })
                            this.dialogVisible = false
                        }
                    }, null)
                )
            },
            dayClick(day, jsEvent) {
                let childIndex = $(jsEvent.target).parent(".events-day").index() < 0 ? $(jsEvent.target).index() : $(jsEvent.target).parent(".events-day").index(),
                    parentIndex = $($(jsEvent.target).parents(".events-week")[0]).index()
                $(".day-cell").css("background", "#fff")
                $($($(".dates-bg").children()[parentIndex]).children()[childIndex]).css("background", "#20a0ff")

                let selectedDay = day
                selectedDay = selectedDay.getFullYear()+"-"+(selectedDay.getMonth()+1 > 9 ? selectedDay.getMonth()+1 : '0'+(selectedDay.getMonth()+1))+"-"+(selectedDay.getDate() > 9 ? selectedDay.getDate() : '0'+(selectedDay.getDate()));
                this.selectedDay = selectedDay;
                let params = {
                    doctorId: parseUrlParams("id"),
                    visitDate: selectedDay,
                }
                common.requestAjax(CONSTANT.URL.DOCTOR.VISITDETAIL, JSON.stringify(params), {}, (res) => {
                    if (res.status == 200) {
                        this.detail = res.data.bussData
                    }
                }, null)
                this.configList.param.queryDate = selectedDay;
                this.getList()

            },
            handleSelectDate(val) {
                this.visitDate1 = val.getFullYear()+"-"+(val.getMonth()+1 > 9 ? val.getMonth()+1 : '0'+(val.getMonth()+1))+"-"+(val.getDate() > 9 ? val.getDate() : '0'+val.getDate())
            }
        }
    }
</script>

<style lang="scss">
    .comp-full-calendar {
        padding: 20px 180px!important;
        .day-cell {
            height: 60px!important;
            min-height: 60px!important;
        }
        .events-day {
            height: 69px!important;
            min-height: 69px!important;
        }
    }
    .container {
        .item-input {
            margin-bottom: 20px;
            .title {
                width: 80px;
                display: inline-block;
                text-align: right;
            }
            .el-input {
                width: 200px;
            }
        }
        .inquiry-table {
            padding-left: 180px;
            li {
                margin-bottom: 20px;
            }
            li>span:nth-child(1) {
                display: inline-block;
                /*width: 200px;*/
                /*text-align: right;*/
                padding-right: 30px;
            }
        }
    }

    .el-date-picker {
        width: 50%!important;
        .el-picker-panel__content {
            width: 100%!important;
            margin: 0;
        }
    }

    .el-popper .popper__arrow, .el-popper .popper__arrow::after{
        content: "";
        border-width: 0!important;
    }

    .el-picker-panel.el-date-picker.el-popper {
        top: 150px!important;
    }
</style>
